Ext.onReady(function(){
	MENU_ICONS.initPage();
});
var MENU_ICONS={
		initPage: function(){
			Ext.create('Ext.container.Viewport', {
			    layout: 'border',
			    frame:false,
			    border:false,
			    items: [{
			    	id: 'mainPanel',
			        region: 'center',
			        layout: 'fit',
			        items:[MENU_ICONS.createIconPanel()]
			    }]
			});
		},
		createIconPanel: function(){
			var me = this;
			var data = [];
			for(i=1;i<=53;i++){
				data.push({
					"index": (i-1),
					"icon_32": "icon_"+i+"_32",
					"icon_32_img": CONTEXT.contextPath + '/assets/plug-in/css/images/desktop_icon/icon_'+i+'_32.png',
					"icon_48": "icon_"+i+"_48",
					"icon_48_img": CONTEXT.contextPath + '/assets/plug-in/css/images/desktop_icon/icon_'+i+'_48.png'
				});
			}
			
		    Ext.define('ImageModel', {
		        extend: 'Ext.data.Model',
		        fields: [
		            {name: 'index'},
		            {name: 'icon_32'},
		            {name: "icon_32_img"},
		            {name: "icon_48"},
		            {name:"icon_48_img"}
		        ]
		    });
		    
		    var store = Ext.create('Ext.data.JsonStore', {
		        model: 'ImageModel',
		        sortInfo: {
		            field    : 'name',
		            direction: 'ASC'
		        },
		        data: data
		    });
		    var dataview = Ext.create('Ext.view.View', {
		        deferInitialRefresh: false,
		        store: store,
		        tpl  : Ext.create('Ext.XTemplate',
		            '<tpl for=".">',
		                '<div class="data" style="background-image:()">',
		                    (!Ext.isIE6? '<img width="64" height="64" src="{[values.icon_48_img]}" />' :
		                     '<div style="width:74px;height:74px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'{[values.icon_48_img]}\',sizingMethod=\'scale\')"></div>'),
		                    '<strong>ICON_{index}</strong>',
		                '</div>',
		            '</tpl>'
		        ),
		        plugins : [
		            Ext.create('Ext.ux.DataView.Animated', {
		                duration  : 550,
		                idProperty: 'index'
		            })
		        ],
		        id: 'phones',
		        itemSelector: 'div.data',
		        overItemCls : 'phone-hover',
		        multiSelect : true,
		        autoScroll  : true,
		        listeners:{
		        	"itemclick": function(view,record,el,eOpts ){
		        		var field = Ext.getCmp("menuform").findById("ICON_URL");
		        		field.setValue(record.get("icon_48"));
		        		Ext.getCmp("iconWin").close();
		        	}
		        }
		    });
		    
		    return dataview;
		}
};